﻿<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js"></script>
<div id="app">
    <el-row>
        <el-col :span="24">
            您正在做的业务是：人力资源--调动管理--调动查询
        </el-col>
    </el-row>
    <el-row style="height: 10px"></el-row>
    <el-row>
        <el-col :span="24" style="text-align: right">
            <el-button type="primary" v-on:click="Show()">查询</el-button>
        </el-col>
    </el-row>
    <el-row style="height: 10px"></el-row>
    <el-row>
        <el-col :span="3" style="border: 1px solid black; background-color: #ffd553;">
            请输入I-II-III级机构
        </el-col>
        <el-col :span="5" style="border: 1px solid black;">
            <el-cascader v-model="index" :options="data" :props="props" ref="refs" v-on:change="Change" style="width: 230px;" size="small" placeholder="请选择" />
        </el-col>
        <el-col :span="3" style="border: 1px solid black; background-color: #ffd553;">
            请输入登记时间
        </el-col>
        <el-col :span="5" style="border: 1px solid black;">
            <el-date-picker v-model="index2" style="width: 250px;" type="datetimerange"
                            v-on:change="Change2" start-placeholder="Start date"
                            end-placeholder="End date" format="YYYY-MM-DD" date-format="YYYY-MM-DD" />
        </el-col>
        <el-col :span="3" style="border: 1px solid black; background-color: #ffd553;">

        </el-col>
        <el-col :span="5" style="border: 1px solid black;">

        </el-col>
    </el-row>
    <el-row style="height: 10px"></el-row>
    <el-row>
        <el-col :span="24">
            <el-table :data="data2" border style="width: 100%">
                <el-table-column prop="firstKindName" label="I级机构"></el-table-column>
                <el-table-column prop="secondKindName" label="II级机构"></el-table-column>
                <el-table-column prop="thirdKindName" label="III级机构"></el-table-column>
                <el-table-column prop="humanName" label="名字"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button v-on:click="Dd(scope.row.mchId)" type="primary">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-row>
        <div id="pageDiv">
            <span class="span1">  总数：{{count}} 例    当前第{{a}}页 /每页显示 {{b}} 条    共 {{page}} 页  </span>
            <div class="div">
                <button v-on:click="HomePage()">首页</button>
                <button v-on:click="PreviousPage()">上一页</button>
                <button v-on:click="NextPage()">下一页</button>
                <button v-on:click="LastPage()">尾页</button>
                跳到第
                <input type="text" style="width: 30px;height: 20px;" v-model="pages">
                <a>页</a>
                <button v-on:click="GoTo()">
                    <img src="~/images/go.bmp" />
                </button>
            </div>
        </div>
    </el-row>
</div>

<script type="text/javascript">
    const { createApp, ref, reactive,computed } = Vue
    const { ElMessage } = ElementPlus

    var app = createApp({
        setup() {

            const data = ref([])
            const a = ref(1)//当前页数
            const b = ref(5)//每页显示数
            const count = ref(0)//数据总数
            const page = computed(() => {
                return Math.ceil(count.value / b.value)
            });//总页数
            const pages = ref()//跳转到的页数
            const data2 = ref([])
            const index = ref(null)
            const index2 = ref(null)
            const refs = ref(null)
            const props = reactive({
                label: "label",
                value: "value",
                children: "children",
            })
            const select = reactive({
                s1: null,
                s2: null,
                s3: null,
            })
            function Show() {
                axios.get("/CFTK/GetCFFKCFSKCFTK")
                    .then(res => {
                        data.value = res.data
                    })
                    .catch(err => {
                        console.log(err);
                    })
                axios.get("/MC/MCFenYe2", {
                    params: {
                        a: a.value,
                        b: b.value,
                        s1: select.s1,
                        s2: select.s2,
                        s3: select.s3,
                    }
                })
                    .then(res => {
                        data2.value = res.data
                        console.log(data2.value)
                    })
                    .catch(err => {
                        console.log(err);
                    })
                axios.get("/MC/MCCount2", {
                    params: {
                        s1: select.s1,
                        s2: select.s2,
                        s3: select.s3,
                    }
                })
                    .then(res => {
                        count.value = res.data
                    })
                    .catch(err => {
                        console.log(err);
                    })
            }
            function Dd(val) {
                window.location.href = "/MC/MCSelectYm?id=" + val;
            }
            function Change() {
                const a = [];
                const b = [];
                const arr = refs.value.getCheckedNodes()[0].pathNodes;
                arr.forEach((i) => {
                    a.push(i.label);
                    b.push(i.value);
                });
                select.s1 = b[2];
            }
            function Change2() {
                select.s2 = index2.value[0]
                select.s3 = index2.value[1]
            }
            function time(val) {
                const date = new Date(val)
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                const time = `${year}年${month}月${day}日`
                return time
            }
            Show()

                                     //首页
            function HomePage() {
                a.value = 1;
                Show();
            }

            //上一页
            function PreviousPage() {
            if (a.value != 1) {
                    a.value -= 1;
                    Show();
                }
            }

            //下一页
            function NextPage() {
            if (a.value != page.value) {
                    a.value += 1;
                    Show();
                }
            }

            //尾页
            function LastPage() {
                a.value = page.value;
                Show();
            }


            //转到页数
            function GoTo() {
                if (!isNaN(pages.value)) {
                    if (pages.value > page.value || pages.value < 1) {
                        alert("输入的页数有误！")
                        pages.value = ""
                    } else {
                        a.value = Number(pages.value)
                        pages.value = ""
                        Show();
                    }
                } else {
                    alert('你输入的不是数字！')
                }
            }
            return {
                a,
                b,
                count,
                data,
                data2,
                index,
                index2,
                refs,
                props,
                select,
                Show,
                Dd,
                time,
                Change,
                Change2,
                page,pages,HomePage,LastPage,NextPage,PreviousPage,GoTo
            }
        }
    })
    app.use(ElementPlus)
    app.mount('#app')
</script>

<style scoped>
    #pagination {
        position: absolute;
        right: 0px;
        top: 10px;
    }

    body {
        background-color: #ffffcc;
    }

    body {
        background-color: #ffffcc;
    }

    #pageDiv {
        padding: 10px;
    }

    .div {
        width: 410px;
        height: 25px;
        /* background-color: black; */
        margin-left: 400px;
        margin-top: -26px;
        line-height: 25px;
    }

    .span1 {
        font-size: 15px;
    }

    .div button {
        margin: 0 5px;
        background-color: #00000000;
        border: 0px;
    }

    .div a {
        margin: 0 5px;
    }

    a {
        text-decoration: none;
        color: white;
    }

    tbody, td, tfoot, th, thead, tr {
        border-color: inherit;
        background-color: #ffffbb;
        border-style: solid;
        border-width: 0;
    }
</style>